<template>
    <div>
                        <!-- 面包屑区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">人在回路</el-breadcrumb-item>
        <el-breadcrumb-item>决策</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <el-button class="queryBtn" @click="gotoQueryDec" type="primary">查询决策</el-button>
      <el-button class="queryBtn" disabled type="primary">应用决策</el-button>
      <el-button class="queryBtn" @click="gotoDecHumanFea" type="primary">决策特征工程</el-button>
      <el-button class="queryBtn" @click="gotoLearnDec" type="primary">决策学习器</el-button>
      <el-form class="selectHuFea" label-position="left" label-width="100px"  :model="chooseHumanFeaForm">
        <el-form-item prop="featureEng_name" label="特征工程">
          <el-input clearable  readonly v-model="chooseHumanFeaForm.featureEng_name" style="width: 300px"
                    @click.native="humanFeaDialogVisible=true" placeholder="请选择特征工程"></el-input>
        </el-form-item>
      </el-form>
      <el-form label-position="left" label-width="100px"  :model="chooseLearnerForm">
        <el-form-item prop="learner_name" label="学习器">
          <el-input clearable  readonly v-model="chooseLearnerForm.learner_name" style="width: 300px"
                    @click.native="learnerDialogVisible=true" placeholder="请选择学习器"></el-input>
        </el-form-item>
      </el-form>
      <!-- 决策应用特征工程加学习器部分 -->
      <el-form label-position="left" label-width="100px" :model="decideHFAndLeaForm" ref="decideHumanFeaFormRef"  class="demo-ruleForm">
        <el-form-item label="决策名" prop="learner_name">
          <el-input clearable  v-model="decideHFAndLeaForm.decision_name" placeholder="请填写决策名" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="决策类型" prop="learner_type">
          <el-select  v-model="decideHFAndLeaForm.decision_type" placeholder="决策类型" style="width: 300px">
            <el-option v-for="(option, index) in decisionTypeOptions" :key="index" :label="option.name" :value="option.type"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
            <!-- 决策应用特征工程决策参数的表单 -->
      <el-form label-position="left" label-width="100px" :model="decideHumanFeaParamForm">
        <el-form-item label="选择标签" prop="label">
          <el-select  v-model="decideHumanFeaParamForm.label" placeholder="选择标签" style="width: 300px">
            <el-option
              v-for="(item,index) in columnsList" :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 提交所有表单  -->
      <el-button class="submitBtn" type="primary" @click="submitAllDecForm">应用决策</el-button>
    </el-card>
      <!--      选择特征工程，弹出的窗口-->
    <el-dialog title="选择特征工程" :visible.sync="humanFeaDialogVisible" @close="getColumns">
      <query-human-feature :isHFeaDialog="true" @choose-HumanFea="chooseHumanFea"></query-human-feature>
    </el-dialog>
      <!--      选择学习器，弹出的窗口-->
    <el-dialog title="选择学习器" :visible.sync="learnerDialogVisible">
      <query-learner :isLearnDialog="true" @learner-choose="chooseLearner"></query-learner>
    </el-dialog>
    </div>
</template>

<script>
import QueryHumanFeature from './../feature/QueryHumanFeature'
import QueryLearner from './../learn/QueryLearner'
import featureApi from './../../api/feature'
import decisionApi from './../../api/decision'
// 学习器类型
const decisionTypeOptions = [
  { type: 'Manual', name: '人工' },
  { type: 'Auto', name: '自动化' },
  { type: 'HML', name: '人在回路' }
]
export default {
  name: 'Decision',
  components: {
    QueryHumanFeature,
    QueryLearner
  },
  data () {
    return {
      // 决策类型
      decisionTypeOptions,
      // 选择特征工程的
      chooseHumanFeaForm: {
        featureEng_name: '',
        original_dataset_id: '',
        featureEng_id: ''
      },
      // 选择学习器的
      chooseLearnerForm: {
        learner_id: '',
        learner_name: ''
      },
      datasetId: '',
      // 决策于特征的表单
      decideHFAndLeaForm: {
        decision_name: '',
        decision_type: '',
        decision_parameters: {},
        featureEng_id: '',
        dataset_id: ''
      },
      decideHumanFeaParamForm: {
        label: []
      },
      // 特征工程对话框
      humanFeaDialogVisible: false,
      // 学习器对话框
      learnerDialogVisible: false,
      columnsList: []
    }
  },
  methods: {
    // 从人工特征工程传来的选中的特征工程
    chooseHumanFea (currentRow) {
      console.log(currentRow)
      this.chooseHumanFeaForm.featureEng_name = currentRow.featureEng_name
      this.chooseHumanFeaForm.original_dataset_id = currentRow.original_dataset_id
      this.chooseHumanFeaForm.featureEng_id = currentRow.featureEng_id
      this.datasetId = this.chooseHumanFeaForm.original_dataset_id
      this.humanFeaDialogVisible = false
    },
    // 从学习器传来的选中的学习器
    chooseLearner (currentRow) {
      this.chooseLearnerForm.learner_id = currentRow.learner_id
      this.chooseLearnerForm.learner_name = currentRow.learner_name
      this.learnerDialogVisible = false
    },
    // 获取数据集列名
    getColumns () {
      featureApi.getDatasetColumns(this.datasetId).then(response => {
        const resp = response.data
        this.columnsList = resp.data
        // console.log(this.columnsList)
      })
    },
    // 提交应用于特征的决策
    submitAllDecForm () {
      this.decideHFAndLeaForm.dataset_id = this.datasetId
      this.decideHFAndLeaForm.decision_parameters = this.decideHumanFeaParamForm
      this.decideHFAndLeaForm.featureEng_id = this.chooseHumanFeaForm.featureEng_id
      this.decideHFAndLeaForm.learner_id = this.chooseLearnerForm.learner_id
      decisionApi.addAllDec(this.decideHFAndLeaForm).then(response => {
        console.log(response)
        const resp = response.data
        if (resp.meta.code === 204) {
          this.$message.success('添加决策成功')
        } else {
          this.$message.error('添加决策失败')
        }
      })
    },
    // 点击按钮，跳转到决策特征工程页面
    gotoDecHumanFea () {
      this.$router.push('/decision/decHumanFea')
    },
    gotoQueryDec () {
      this.$router.push('/decision/queryDecision')
    },
    gotoLearnDec () {
      this.$router.push('/decision/decLearner')
    }
  }
}
</script>

<style scoped>
.selectHuFea {
  margin-top: 20px;
}
.queryBtn {
  margin-bottom: 20px;
}
</style>
